<template>
  <view class="main-container">
	  
		<!--导航栏-->
		<orderTabBar :tabList="tabList" @clickTabBar="clickTabBar" class="tab-bar" :show-line="true" />
		<u--form :model="queryParams">
			<u-form-item>
				<u--input v-model="queryParams.name" placeholder="请输入关键字搜索"></u--input>
				<u-button slot="right" text="搜索" type="primary" @click="goSearch"></u-button>
			</u-form-item>
		</u--form>
		<!--订单列表-->
		<scroll-view class="policy_list" scroll-y="true" :style="'height:100%'" enable-flex  @scrolltolower="scrollToLower()" @scrolltoupper="updateOrderInfo()">
			<view v-show="currentIndex==1" class="policy_item"  v-for="(item, index) in orderList" :key="index" @click="cgDetail(item.id)">
				<view style="width: 100%;">
					<view>
						<text class="policy_title">{{item.xmmc}}</text> 
					</view>
					<view v-if="item.publishTime">
						<text class="publicTime">{{item.publishTime}}</text>
					</view>
					<view v-else>
						<text class="publicTime" v-if="item.hzfs">合作方式：{{formatterHZFS(item.hzfs)}}</text>
					</view>
					<view class="devideline"></view>
				</view>
			</view>
			<view v-show="currentIndex == 0" class="policy_item"  v-for="(item, index) in orderList" :key="index" @click="cgDetail(item.id)">
				<view style="width: 100%;">
					<view>
						<text class="policy_title">{{item.resultName}}</text> 
						<!-- <text class="policy_title" style="text-align: right;">{{item.years}}</text> -->
					</view>
					<view v-if="item.publishTime">
						<text class="publicTime">{{item.publishTime}}</text>
					</view>
					<view v-else>
						<text class="publicTime">单位名称：{{item.unitName}}</text>
					</view>
					<view class="devideline"></view>
				</view>
			</view>

		    <view class="no-data" v-if="orderList.length == 0" @click="getOrderList()">
			    <image src="https://file.genepre.com/wechat/nomsg5_new.png" mode="aspectFit" class="no-data-img"></image>
			   {{noData}}
		    </view>
		</scroll-view>
	  </view>
</template>

<script>
	import env from '@/utils/env.js';
	import * as dict from '@/api/system/dict/data.js'
	import orderTabBar from '@/wxcomponents/tab_bar.vue';
	import * as cgzh from '@/api/source/kjcg/kjcgzh.js'
	import * as cgdj from '@/api/source/kjcg/cgdjk.js'
	import * as codeList from '@/utils/code.js'
	export default {
	  components: {
		orderTabBar,
	  },
	  data() {
		return {
		  showPage: false,
		  // 订单列表tab项
		  tabList: [
			  {
				status: '0',
				title: '科技成果登记库'
			  },
			  {
				status: '1',
				title: '可转换成果库'
			  },
		  ],
		  jsspDict:[],
		  tzfsDict:[],
		  cylyDict:[],
		  // 当前选择tab项
		  currentIndex: 0,
		  // 当前查询状态
		  currentStatus: '',
		  // 订单列表高度
		  orderHeight: 0,
		  // 是否还有更多数据
		  noMoreData: {},
		  // 订单列表
		  orderList: [],
		  // 页码数组
		  pageNum: 1,
		  // 每页请求数
		  pageSize: 10,
		  policylevel:'',
		  searchValue:'',
			noData:'暂无数据',
		  total:0,
		  cgzhquery:{
			  pageSize:10,
			  pageNum:1
		  },
		  cgdjquery:{
		  			  pageSize:10,
		  			  pageNum:1
		  },
			queryParams:{}
		}
	  },
	  onShow() {
		// let _this = this
		// _this.getOrderList()
	  },
	  mounted() {
		let _this = this;
		const query = uni.createSelectorQuery().in(this);
		query.select('.tab-bar').boundingClientRect(data => {
		  _this.tabHeight = data.height
		  _this.orderHeight = _this.windowHeight-5
		}).exec();
		uni.showLoading({
			title:"加载中。。。"
		})
		this.getDict()
		this.getOrderList()

	  },
	  methods: {
			formatterHZFS(value){
				return this.tzfsDict.find(item=>item.dictValue===value)?.dictLabel||value
			},
			goSearch() {
				this.cgzhquery.pageNum = 1;
				this.cgdjquery.pageNum = 1;
				this.orderList = [];
				this.getOrderList();
			},
		// tab切换
		clickTabBar(index, status) {
			this.cgzhquery.pageNum = 1;
			this.cgdjquery.pageNum = 1;
		  this.currentIndex = index
		  this.currentStatus = status
		  this.orderList = [];
		  this.getOrderList()
		},
		getDict(){
			dict.getDicts('xmyq').then((res)=>{
				this.jsspDict = res.data
			})
			dict.getDicts('tzfs').then((res)=>{
				this.tzfsDict = res.data
			})
			dict.getDicts('cms_industry_type').then((res)=>{
				this.cylyDict = res.data
			})
		},
		// 加载订单列表
		getOrderList() {
			uni.showLoading({
				title:"加载中。。。"
			})
			this.noData = '加载中。。。'
			if(this.currentIndex == 0){
				let data = this.cgdjquery
				data.isPublish = 1
				if(this.queryParams.name){
					data.resultName = this.queryParams.name
				}else{
					delete data.resultName
				}
				cgdj.getCgdjList(data).then((res)=>{
					if(res.errMsg='request:fail'){
						this.noData = '暂无数据，点击重试'
					}
					res.rows.forEach(v => {
						this.orderList.push(v)
					})
					this.total = res.total
					uni.hideLoading({});
					if(this.orderList.length == 0){
						this.noData = '暂无数据，点击重试'
					}
					
				});
			}else{
				let data = this.cgzhquery
				data.isPublish = 1
				if(this.queryParams.name){
					data.searchValue = this.queryParams.name
				}else{
					delete data.searchValue
				}
				cgzh.getKjcgzhList(this.cgzhquery).then((res)=>{
					if(res.errMsg='request:fail'){
						this.noData = '暂无数据，点击重试'
					}
					res.rows.forEach(v => {
						this.orderList.push(v)
					})
					this.total = res.total
					uni.hideLoading({});
					if(this.orderList.length == 0){
						this.noData = '暂无数据，点击重试'
					}
					
				});
			}
			
			// if(this.orderList.length == 0){
			// 	this.noData = '暂无数据，点击重试'
			// }
		},
		// 更新order
		updateOrderInfo(index) {
			let _this = this
			if(_this.currentIndex == 0){
				this.cgdjquery.pageNum = 1
				this.orderList = []
				_this.getOrderList()
			}else{
				this.cgzhquery.pageNum = 1
				this.orderList = []
				_this.getOrderList()
			}
		},
		// 滑到底部 加载更多
		scrollToLower() {
			let _this = this
			if(_this.orderList.length < _this.total){
				if(_this.currentIndex == 0){
					_this.cgdjquery.pageNum = _this.cgdjquery.pageNum + 1;
					_this.getOrderList();
				}else{
					_this.cgzhquery.pageNum = _this.cgzhquery.pageNum + 1;
					_this.getOrderList();	
				}
				
			}else{
				uni.showToast({
					icon:'none',
					title:"没有更多数据"
				})
			}
		},
		cgDetail(id){
			if(this.currentIndex == 0){
				uni.navigateTo({
					url:"/subpages/pages/detail/cgdj_detail?id="+id
				})
			}else{
				uni.navigateTo({
					url:"/subpages/pages/detail/cgzh_detail?id="+id
				})
			}
			
		}
	  },
	  computed: {
			
	  }
	}
</script>

<style>
	.main-container {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		background-color: #e6e6e6;
	}
	
	.main-container .tab-bar {
		width: 100%;
		border-radius: 15rpx;
	}
	
	.main-container .order-lists {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}
	
	.head {
		display: flex;
		width: 93vw;
		margin: 20rpx auto;
		height: 70rpx;
		border-radius: 30rpx;
		background-color: #fff;
		text-align: center;
	}
	
	.search_view{
		margin: 0 auto;
	}
	
	.search {
		height: 40rpx;
		padding-top: 15rpx;
		font-size: 25rpx;
		float: left;
	}
	
	.no-data {
		width: 100%;
		height: 300rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		margin-top: 100rpx;
	}
	
	.no-data .no-data-img {
		width: 300rpx;
		height: 268rpx;
	}
	
	.policy_list {
		width: 100%;
		margin: 20rpx 35rpx;
		height: fit-content;
		background-color: #fff;
		border-radius: 15rpx;
	}
	
	.policy_item {
		height: 80rpx;
		margin-left: 20rpx;
		background-color: #fff;
	}
	
	.policy_title { 
		display: -webkit-box;
		width: 70%;
		margin-top: 50rpx;
		font-size: 28rpx;
		overflow: hidden;
		word-break: break-all;  /* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;  /* 超出部分省略号 */
		display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 1; /** 显示的行数 **/
	}
	
	.publicTime {
		width: 80%;
		float:left;
		font-size: 26rpx;
		color: #a1a1a1;
		margin-top: 15rpx;
		overflow: hidden;
		word-break: break-all;  /* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;  /* 超出部分省略号 */
		display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 1; /** 显示的行数 **/
	}
	
	.devideline {
		float: left;
		height: 0.3rpx;
		width:100%;
		background-color: #eeeeee;
		margin-top: 15rpx;
		margin-bottom: 15rpx;
	}
</style>